<!DOCTYPE html>

<html lang="zh-CN">

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<title>首页</title>
	<link rel="stylesheet" href="/static/css/bootstrap.min.css" />
	<link rel="stylesheet" href="/static/css/app.css" />
	<!-- echarts.js -->
	<script type="text/javascript" src="/static/js/echarts.min.js"></script>
	
	<script type="text/javascript" src="/static/js/echarts-map-china.js"></script>

	<script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
	<!-- 城市数据，放在其他js好看点 -->
	<script type="text/javascript" src="/static/js/mapdata/city_geo.js"></script>
	<script type="text/javascript" src="/static/js/map/js/anhui.js"></script>
	<script type="text/javascript" src="/static/js/map/js/aomen.js"></script>
	<script type="text/javascript" src="/static/js/map/js/beijing.js"></script>
	<script type="text/javascript" src="/static/js/map/js/chongqing.js"></script>
	<script type="text/javascript" src="/static/js/map/js/fujian.js"></script>
	<script type="text/javascript" src="/static/js/map/js/gansu.js"></script>
	<script type="text/javascript" src="/static/js/map/js/guangdong.js"></script>
	<script type="text/javascript" src="/static/js/map/js/guangxi.js"></script>
	<script type="text/javascript" src="/static/js/map/js/guizhou.js"></script>
	<script type="text/javascript" src="/static/js/map/js/hainan.js"></script>
	<script type="text/javascript" src="/static/js/map/js/hebei.js"></script>
	<script type="text/javascript" src="/static/js/map/js/heilongjiang.js"></script>
	<script type="text/javascript" src="/static/js/map/js/henan.js"></script>
	<script type="text/javascript" src="/static/js/map/js/hubei.js"></script>
	<script type="text/javascript" src="/static/js/map/js/hunan.js"></script>
	<script type="text/javascript" src="/static/js/map/js/jiangsu.js"></script>
	<script type="text/javascript" src="/static/js/map/js/jiangxi.js"></script>
	<script type="text/javascript" src="/static/js/map/js/jilin.js"></script>
	<script type="text/javascript" src="/static/js/map/js/liaoning.js"></script>
	<script type="text/javascript" src="/static/js/map/js/neimenggu.js"></script>
	<script type="text/javascript" src="/static/js/map/js/ningxia.js"></script>
	<script type="text/javascript" src="/static/js/map/js/qinghai.js"></script>
	<script type="text/javascript" src="/static/js/map/js/shandong.js"></script>
	<script type="text/javascript" src="/static/js/map/js/shanghai.js"></script>
	<script type="text/javascript" src="/static/js/map/js/shanxi.js"></script>
	<script type="text/javascript" src="/static/js/map/js/shanxi1.js"></script>
	<script type="text/javascript" src="/static/js/map/js/sichuan.js"></script>
	<script type="text/javascript" src="/static/js/map/js/taiwan.js"></script>
	<script type="text/javascript" src="/static/js/map/js/tianjin.js"></script>
	<script type="text/javascript" src="/static/js/map/js/xianggang.js"></script>
	<script type="text/javascript" src="/static/js/map/js/xinjiang.js"></script>
	<script type="text/javascript" src="/static/js/map/js/xizang.js"></script>
	<script type="text/javascript" src="/static/js/map/js/yunnan.js"></script>
	<script type="text/javascript" src="/static/js/map/js/zhejiang.js"></script>

</head>

<body class="bg01">
	<header class="header">
		<h3 id="province_province">计算机人才招聘大数据系统</h3>
	</header>
<!--	<form action="/job" method="get">-->
<!--		<input name="cate2" type="submit" value="Java开发工程师" style="position:absolute;top:0px;" />-->
<!--	</form>-->
	<div class="wrapper">
		<div class="container-fluid">
			<div class="row fill-h">
				<div class="col-lg-3 fill-h">
					<div class="xpanel-wrapper xpanel-wrapper-2">
						<div class="xpanel">
							<!--行业人才招聘数量需求-->
							<!--<div class="xpanel1 title2"><span style="float:left">行业人才需求排行</span><span style="float:right"><span id="city1">全国</span>TOP10 </span></div>-->
							<!--<span id="demo"></span>-->
							<!--<iframe frameborder="0" width="100%" height="95%" srcdoc="<div ><div style='float:left'><font color='white'>{%for i in cate1_num%}<br>{{i[0]}}</br>{%endfor%}</font></div><div style='float:right'><font color='white'>{%for i in cate1_num%}<br>需求量：{{i[1]}}</br>{%endfor%}</font></div></div>">-->
							<!--</iframe>-->

							<div class="fill-h" id="cate1"></div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-2">
						<div class="xpanel">
							<!--岗位人才需求排行-->

							<!--<div class="xpanel1 title2"><span style="float:left">岗位人才需求排行</span><span style="float:right"><span id="city2">全国</span>TOP10 </span></div>-->
							<!--<span id="demo1"></span>-->
							<!--<iframe frameborder="0" width="100%" height="95%" srcdoc='<div><div style="float:left"><font color="white">{%for i in cate2_num%}{%if(i[0]=="其他")%}{%else%}<br>{{i[0]}}</br>{%endif%}{%endfor%}</font></div> <div style="float:right"><font color="white">{%for i in cate2_num%}{%if(i[0]=="其他")%}{%else%}<br>需求量：{{i[1]}}</br>{%endif%}{%endfor%}</font></div></div>'>-->

							<!--</iframe>-->
							<!--<div>-->
							<!--<div style="float:left"><font color="white">{%for i in cate2_num%}{%if(i[0]=="其他")%}{%else%}<br>{{i[0]}}</br>{%endif%}{%endfor%}</font></div>-->
							<!--<div style="float:right"><font color="white">{%for i in cate2_num%}{%if(i[0]=="其他")%}{%else%}<br>需求量：{{i[1]}}</br>{%endif%}{%endfor%}</font></div>-->
							<!--</div>-->
							<div class="fill-h" id="cate2"></div>
						</div>
					</div>
				</div>
				<div class="col-lg-6 fill-h">
					<div class="xpanel-wrapper xpanel-wrapper-1 " style="height: 13%;" >

							<div class="xpanel" id="title">
								<span class="xpanel2 jobsum" id="jobsum">岗位数量：加载中</span>
							</div>

					</div>
					<div class="row" style="height: 87%;">
						<div class="xpanel-wrapper xpanel-wrapper-1">
							<div class="xpanel">
								<!--各个主要城市招聘人数-->
								<div class="fill-h" id="scatterMap"></div>
							</div>
						</div>
					</div>
				</div>

				<div class="col-lg-3 fill-h">
					<div class="xpanel-wrapper xpanel-wrapper-1">
						<div class="xpanel">
							<div class="xpanel1 title2">
								<!--<center><span style="float:left">岗位</span>城市<span style="float:right">平均薪资 </span></center>-->
								<table width="100%">
									<tr style="color:white;font-size:16px;text-align:center;">
										<td width="40%">岗位</td>
										<td width="30%">城市/省份</td>
										<td width="30%">平均薪资</td>
									</tr>
								</table>
							</div>
							<span id="demo3"></span>
							<!--<marquee direction=up behavior=scroll loop=-1 scrollamount=1 scrolldelay=10 align=top height=93% width=100% hspace=20 vspace=10 onmouseover=this.stop() onmouseout=this.start()><font color="white">{%for i in cate2_2%}{%if(i[0]=="其他")%}{%else%}<br>{{i[0]}}&nbsp;&nbsp;&nbsp;&nbsp;{{i[1]}}&nbsp;&nbsp;&nbsp;&nbsp;{{i[2]}}</br>{%endif%}{%endfor%} </font></marquee>-->
							<!-- 省份地图 -->
							<!--<div class="fill-h" id="cate2"></div>-->

						</div>
					</div>
					<!--<div class="xpanel-wrapper xpanel-wrapper-3">-->
					<!--<div class="xpanel">-->
					<!--&lt;!&ndash; 区县地图 &ndash;&gt;-->
					<!--<div class="fill-h" id="expzb"></div>-->
					<!--</div>-->
					<!--</div>-->
				</div>
			</div>
		</div>
	</div>

	<!-- 主题的js -->
	<script type="text/javascript" src="/static/js/theme/theme.js"></script>
	<!-- 一些工具类封装 -->
	<script type="text/javascript" src="/static/js/jobs.js"></script>
	<script type="text/javascript">


		//各个主要城市招聘人数
		var chart6 = echarts.init(document.getElementById("scatterMap"));


		//点击省份或城市
		chart6.on("click", params => {
			console.log(params)
			if (params.componentType == "geo" && (params.name.indexOf("市") != -1 || params.name.indexOf("区") != -1 || params.name.indexOf("州") != -1 || params.name.indexOf("县") != -1 || params.name.indexOf("盟") != -1) && params.name != "贵州") {
				//显示城市信息
				city_post(params);
				fun_jobsum("",params.name)//显示城市的招聘数量
				fun_cates("",params.name)//显示城市的岗位需求
			} else if (params.componentType == "geo" && (params.name == "台湾" || params.name.indexOf("岛") != -1)) {
			} else if (params.componentType == "geo") {
				//设置为对应省份的数据
				fun_city_num(params.name,jihe2['jihe'],jihe2['jobsum']);
				province_click(params);
				fun_jobsum(params.name,"")//显示省份的招聘数量
				fun_cates(params.name,"")//显示省份的岗位需求
			} else {
				city_post(params)
				fun_jobsum("",params.name)//显示城市的招聘数量
				fun_cates("",params.name)//显示城市的岗位需求
			}

		})

		//点击转换回全国
		$(function () {
			$("#province_province,#title").click(function () {
				fun_get_qg()
				fun_city_num("china",jihe2['jihe'],jihe2['jobsum']);
				$("#jobsum").text("岗位数量："+jihe2['jobsum'])
				drawCate1(cateData_qg,"全国") //返回全国岗位数量
				drawCate2(cateData_qg, "全部")//返回全国岗位数量
			})
		})

		// 绘制地图数据,地图和数据
		//map 为china,安徽这些地图的名字
		function fun_city_num(map,jihe,jobsum) {
			// console.log("绘制地图:"+map)
			//转换成 (精度，维度,值) 的格式
			const geo_data = []
			for (let i = 0; i < jihe.length; i++) {
				//是否有这个经纬度
				let geoCoord = city_geo[jihe[i].name];
				if (geoCoord) {
					geo_data.push({
						name: jihe[i].name,
						value: geoCoord.concat(jihe[i].value)
					});
				}
			}
			var option6 = {
<!--				title: {-->
<!--					text: '全国各个主要城市招聘人数',-->
<!--					subtext: '招聘'+jobsum+'人',-->
<!--					x: 'center',-->
<!--					textStyle: {-->
<!--						color: '#fff'-->
<!--					}-->
<!--				},-->
				legend: {
					data: ['人数'], //与series的name属性对应
					orient: 'vertical',
					y: 'bottom',
					x: 'right',
					textStyle: {
						color: '#fff'
					}
				},
				tooltip: {
					trigger: 'item',
					formatter: function (params) {
						return params.name + ' : ' + params.value[2];
					}
				},
				visualMap: {
					min: 0,
					max: 100000,
					calculable: true,
					inRange: {
						color: ['#50a3ba', '#eac736', '#d94e5d']
					},
					textStyle: {
						color: '#fff'
					}
				},
				geo: {
					//显示不同的地图
					map: map,
					roam: false, //开启鼠标缩放和漫游
					zoom: 1, //地图缩放级别
					selectedMode: false, //选中模式：single | multiple
					left: 0,
					right: 0,
					top: 0,
					bottom: 0,
					layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
					layoutSize: '100%',
					label: {
						emphasis: {
							show: true,
							color: '#f19000'
						}
					},
					itemStyle: {
						normal: {
							areaColor: '#101f32',
							borderWidth: 1.1,
							borderColor: '#43d0d6'
						},
						emphasis: {
							areaColor: '#069'
						}
					}
				},
				series: [{
					name: '人数',
					type: 'scatter',
					coordinateSystem: 'geo',
					symbolSize: 12,
					label: {
						normal: {
							show: false
						},
						emphasis: {
							show: false
						}
					},
					itemStyle: {
						emphasis: {
							borderColor: '#fff',
							borderWidth: 1
						}
					},
					data: geo_data,
				}]
			};
			chart6.setOption(option6);
		}

		//点击城市转换-
		function city_post(params) {
			var name = {};
			name['name'] = params.name;
			post_3("hyrc_num1", "gwrc_num1", "gw_city_sal1", params)
		}

		//点击省份转换-
		function province_click(params) {
			var name = {};
			name['name'] = params.name;
			post_3("province_hyrc_num1", "province_gwrc_num1", "province_gw_city_sal1", params)

		}

		//POST行业人才
		function post_3(dir1, dir2, dir3, params) {
			var name = {};
			name['name'] = params.name.replace("市", "");
			//$.post("/ind2/"+dir1,data=name,result=>{-
			//var a="";-
			//for(var i=0;i<result.num.length;i++){-
			//a = a+"<span style=\"color:white;font-size:14px;line-height:2.2em\"><span style=\"float:left\">"+result.hyrc[i]+"</span>"+"<span style=\"float:right\">需求量："+result.num[i]+"</span></span><br/>"-
			//};-
			//document.getElementById("demo").innerHTML = "<iframe frameborder=\"0\" width=\"100%\" height=\"95%\" srcdoc='"+a+"'></iframe>";-
			//document.getElementById("city1").innerHTML = params.name;-
			//})-

			//$.post("/ind2/"+dir2,data=name,result=>{-
			//var b="";-
			//for(var i=0;i<result.num.length;i++){-
			//b = b+"<span style=\"color:white;font-size:14px;line-height:2.2em\"><span style=\"float:left\">"+result.gwrc[i]+"</span>"+"<span style=\"float:right\">需求量："+result.num[i]+"</span></span><br/>"-
			//};-
			//document.getElementById("demo1").innerHTML = "<iframe frameborder=\"0\" width=\"100%\" height=\"95%\" srcdoc='"+b+"'></iframe>";-
			//document.getElementById("city2").innerHTML = params.name;-
			//})-

			$.post("/ind2/" + dir3, data = name, result => {
				var c = ""
				for (var i = 0; i < result.gw.length; i++) {
					c = c + "<tr style=\"color:white;font-size:14px;text-align:center;\"><td width=\"100%\" style=\"display:block;margin:5px;\">" + result.gw[i].replace("/", "<br/>") + "</td><td width=\"30%\">" + result.city[i] + "</td><td width=\"30%\">" + result.sal[i] + "</td>" + "</tr>"
				}
				document.getElementById("demo3").innerHTML = "<marquee direction=up behavior=scroll loop=-1 scrollamount=1 scrolldelay=10 align=top height=93% width=100% hspace=0 vspace=10 onmouseover=this.stop() onmouseout=this.start()><table width=\"100%\" >" +
					c
					+ "</table></marquee>";
			})
		}

		function fun_jobsum(province,city){
			var name={}
			name['province']=province
			name['city']=city.replace("市","")
			$.post("/ind2/jobsum",data=name,result=>{
				console.log(result)
				$('#jobsum').html(name['province']+name['city']+"岗位数量："+result.jobsum)
			})
		}

		function fun_cates(province,city){
			var name={}
			name['province']=province
			name['city']=city.replace("市","")
			$.post("/ind2/cates_num1",data=name,result=>{
				cateData = result;
				drawCate1(cateData,name['province']+name['city'])
				drawCate2(cateData, "全部")
			})
		}
	</script>

	<script>
		// 城市的工资数据
		var jihe2 = {}
		fun_city_num('china', [{ name: "上海", value: 187899 }, { name: "东莞", value: 179714 }],10000)
		$.get("/ind2/city_num", result => {
			jihe2 = result
			fun_city_num("china",jihe2['jihe'],jihe2['jobsum']);
			$("#jobsum").text("岗位数量："+jihe2['jobsum'])
		});

		//$.get("/ind2/hyrc_num",result=>{-
		//var a="";-
		//for(var i=0;i<result.num.length;i++){-
		//a = a+"<span style=\"color:white;font-size:14px;line-height:2.2em\"><span style=\"float:left\">"+result.hyrc[i]+"</span>"+"<span style=\"float:right\">需求量："+result.num[i]+"</span></span><br/>"-
		//};-
		//document.getElementById("demo").innerHTML = "<iframe frameborder=\"0\" width=\"100%\" height=\"95%\" srcdoc='"+a+"'></iframe>";-
		//});-

		//$.get('/ind2/gwrc_num',result=>{-
		//var b="";-
		//for(var i=0;i<result.num.length;i++){-
		//b = b+"<span style=\"color:white;font-size:14px;line-height:2.2em\"><span style=\"float:left\">"+result.gwrc[i]+"</span>"+"<span style=\"float:right\">需求量："+result.num[i]+"</span></span><br/>"-
		//};-
		//document.getElementById("demo1").innerHTML = "<iframe frameborder=\"0\" width=\"100%\" height=\"95%\" srcdoc='"+b+"'></iframe>";-
		//});-


		function fun_get_qg(){
			$.get("/ind2/gw_city_sal", result => {
				var c = ""
				for (var i = 0; i < result.gw.length; i++) {
					c = c + "<tr style=\"color:white;font-size:14px;text-align:center;\"><td width=\"100%\" style=\"display:block;margin:5px ;\">" + result.gw[i].replace("/", "<br/>") + "</td><td width=\"30%\">" + result.city[i] + "</td><td width=\"30%\">" + result.sal[i] + "</td>" + "</tr>"
				}
				document.getElementById("demo3").innerHTML = "<marquee direction=up behavior=scroll loop=-1 scrollamount=1 scrolldelay=10 align=top height=93% width=100% hspace=0 vspace=10 onmouseover=this.stop() onmouseout=this.start()><table width=\"100%\" >" +
					c
					+ "</table></marquee>";
			})
		}
		fun_get_qg()

	</script>

	<script>
		//分类1的图
		var cate1Chart = jobs.initChartId("cate1")
		//分类2的图
		var cate2Chart = jobs.initChartId("cate2")
		// 分类数据
		var cateData = null;
		// 图1 点击事件
		cate1Chart.on("click", params => {
			console.log("点击分类1")
			console.log(params)
			var cate1 = params.name
			//切换分类2
			drawCate2(cateData, cate1)
		})
		cate2Chart.on("click", params => {
			console.log("进入工作分析")
			console.log(params.name)
			// 打开job蓝图下的index页面
			window.open("{{ url_for('job.index')}}?cate2=" + params.name, "_blank");
		})

		function drawCate1(data,name) {
			var tooltip = jobs.getTooltip({
				formatter: function (params) {
					return "职位大类:" + params.name + "<br>" + "数量:" + params.value + "<br>" + "(点击查看二级职位)"
				}
			})
			var cate1 = data['cate1_num'];
			var nums = []
			var cate1s = []
			for (var i = 0; i < cate1.length; i += 1) {
				nums.push(cate1[i].num)
				cate1s.push(cate1[i].cate1)
			}
			option = {
				title:{
					text:name+"岗位大类需求"
				},
			
				tooltip: tooltip,
				// 数据缩放
				dataZoom: {
					borderColor: "transparent",
					showDetail: false,
					type: "slider",
					// 前10个
					endValue: 4,
					//控制y轴，垂直
					orient: "vertical",
				},
				grid: {
					// top: "5%",
					left: "0%",
					right:"10%",
					bottom:0,
					containLabel:true
				},
		
				xAxis: {
					show:false,
					name: "招聘数量",
					type: "value",
					axisLabel:{
						show:false
					}

				},
				yAxis: {
					name: "岗位大类",
					inverse: true,
					type: 'category',
					data: cate1s,
					axisLabel: {
						interval: 0,
						formatter: function (value, index) {
							if (value.length > 4)
								return value.substring(0, 4) + ".."
							else
								return value
						}
					}
				},
				series: [
					{
						label: {
							show: true,
							position: "right"
						},
						type: "bar",
						name: "cate1",
						data: nums
					}
				]
			}
			cate1Chart.setOption(option)
		}

		//绘制分类2，指定要绘制的哪个cate1的cate2
		function drawCate2(data, cate1) {

			var tooltip = jobs.getTooltip({
				formatter: function (params) {
					return "职位:" + params.name + "<br>" + "数量:" + params.value + "<br>" + "(点击进入职位分析)"
				}
			})

			// 设置cate2图表的标题
			$("#cate2-title").text(cate1 + "类岗位需求")
			var cate2 = data['cate2_num'][cate1]
			var nums = []
			var cate2s = []
			for (var i = 0; i < cate2.length; i += 1) {
				nums.push(cate2[i].num)
				cate2s.push(cate2[i].cate2)
			}
			console.log("绘制cate2:")
			console.log(cate2)

			option = {

				title:{
					text:cate1 + "类岗位需求"
				},
				tooltip: tooltip,
				grid: {
					// top: "5%",
					// 字体大小12,最多6各字符串和两个点，84刚刚好，再加4
					
					left: "0%",
					right:"10%",
					bottom:0,
					containLabel:true


				},
				// 数据缩放
				dataZoom: {
					borderColor: "transparent",
					showDetail: false,
					type: "slider",
					// 前10个
					endValue: 4,
					//控制y轴，垂直
					orient: "vertical"
				},
		
				xAxis: {
					show:false,
					type: "value",
					
				},
				yAxis: {
					inverse: true,
					axisLabel: {
						interval: 0,
						// 最长六个字符串
						formatter: function (value, index) {
							if (value.length > 6)
								return value.substring(0, 6) + ".."
							else
								return value
						}
					},
					type: 'category',
					data: cate2s
				},
				series: [
					{
						label: {
							show: true,
							position: "right"
						},
						itemStyle: {
							// color:"rgba(0,191,255,0.1)"
						},
						type: "bar",
						name: "cate1",
						data: nums
					}
				]
			}
			cate2Chart.setOption(option)

		}

		//请求分类数据
		var cateData_qg=null
		$.get("/ind2/cates_num", result => {
			cateData_qg =result;
			cateData = result;
			drawCate1(cateData,"全国")
			drawCate2(cateData, "全部")
		})


	</script>
</body>

</html>